<template>
  <div class="app-container">
    <div id="container1111"
    v-if="loading"
     v-loading="loading"
     element-loading-text="定位中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    style="height:800px;width:100%"></div>
    <span v-if="!loading && !dataList">您附近10KM内没有监测点！</span>
    <el-card v-for="(item, index) in dataList" :key="index" class="box-card">
      <div slot="header" class="clearfix">
        <span>{{
          item.address +
          "  主要污染物：" +
          item.wuran +
          "  污染级别：" +
          item.jibie
        }}</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleHistory(item.address)"
          >历史曲线</el-button
        >
      </div>
      <el-row>
        <el-col :span="8"> {{ "PM2.5: " + item.pm25 }}</el-col>
        <el-col :span="8">{{ "PM10: " + item.pm10 }}</el-col>
        <el-col :span="8">{{ "TSP: " + item.tsp }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8"> {{ "噪声: " + item.zaosheng }}</el-col>
        <el-col :span="8"> {{ "温度: " + item.wendu }}</el-col>
        <el-col :span="8">{{ "湿度: " + item.shidu }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">{{ "风速: " + item.fengsu }}</el-col>
        <el-col :span="8">{{ "风向: " + item.fengxiang }}</el-col>
        <el-col :span="8">{{ "气压: " + item.qiya }}</el-col>
      </el-row>
    </el-card>
  </div>
</template>


<script>
import { maxlist } from "@/api/system/data";
export default {
  name: "Data",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 监测数据表格数据
      dataList: [],
      plugin: [],
    };
  },
  mounted() {
    
  },
  created() {
    var that = this;
    
    var map = new AMap.Map("container1111", {
      resizeEnable: true,
    });
    AMap.plugin("AMap.Geolocation", function () {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：5s
        position: "RB", //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition(function (status, result) {
        if (status == "complete") {
          onComplete(result);
        } else {
          onError(result);
        }
      });
    });
    //解析定位结果
    function onComplete(data) {
      that.getList(data);
    }
    //解析定位错误信息
    function onError(data) {
      console.log(data);
    }
  },
  methods: {
    /** 查询监测数据列表 */
    getList(data) {
      console.log(data);
      this.loading = true;

      maxlist({
        lat: data.position.lat,
        lng: data.position.lng,
      }).then((response) => {
        this.dataList = response.data;
        this.loading = false;
      });
    },

    /** 修改按钮操作 */
    handleHistory(row) {
      this.$router.push({ path: "/mchart", query: { address: row } });
    },
  },
};
</script>